<route lang="json5">
{
  path: '/about',
  meta: {
    title: '关于我们',
    layout: 'pc-default',
  },
}
</route>

<template>
  <div class="about-page">
    <!-- Banner Section -->
    <section class="page-banner">
      <div class="container-box">
        <h1 class="banner-title">关于我们</h1>
        <p class="banner-subtitle">专业、专注、专心为您服务</p>
      </div>
    </section>

    <!-- Company Introduction -->
    <section class="intro-section">
      <div class="container-box">
        <div class="intro-content">
          <div class="intro-text">
            <h2 class="section-title">山东滨建工程技术服务有限公司</h2>
            <div class="intro-description">
              <p>
                山东滨建工程技术服务有限公司成立于2018年，是一家专业从事建筑工程技术服务的现代化企业。
                公司位于美丽的黄河三角洲中心城市——滨州市，地理位置优越，交通便利。
              </p>
              <p>
                公司自成立以来，始终坚持"质量第一、服务至上、诚信经营、创新发展"的经营理念，
                致力于为建筑行业提供全方位、高质量的技术服务。我们拥有一支高素质的专业技术团队，
                具备丰富的工程实践经验和扎实的理论基础。
              </p>
              <p>
                经过多年的发展，公司已成为滨州地区建筑技术服务领域的知名企业，
                与众多建筑企业、政府部门建立了长期稳定的合作关系，赢得了广泛的信任和好评。
              </p>
            </div>
          </div>
          <div class="intro-image">
            <el-image
              src="/src/assets/images/company-building.jpg"
              alt="公司大楼"
              fit="cover"
              lazy
            />
          </div>
        </div>
      </div>
    </section>

    <!-- Company Stats -->
    <section class="stats-section">
      <div class="container-box">
        <div class="stats-grid">
          <div v-for="stat in companyStats" :key="stat.id" class="stat-item">
            <div class="stat-number">{{ stat.number }}</div>
            <div class="stat-label">{{ stat.label }}</div>
            <div class="stat-description">{{ stat.description }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Our Mission -->
    <section class="mission-section">
      <div class="container-box">
        <div class="mission-content">
          <div class="mission-item">
            <div class="mission-icon">
              <el-icon size="60"><Flag /></el-icon>
            </div>
            <h3>企业使命</h3>
            <p>为建筑行业发展贡献专业力量，推动行业技术进步与创新</p>
          </div>

          <div class="mission-item">
            <div class="mission-icon">
              <el-icon size="60"><View /></el-icon>
            </div>
            <h3>企业愿景</h3>
            <p>成为山东省内一流的建筑工程技术服务企业</p>
          </div>

          <div class="mission-item">
            <div class="mission-icon">
              <el-icon size="60"><Star /></el-icon>
            </div>
            <h3>核心价值观</h3>
            <p>专业、诚信、创新、共赢</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Business Scope -->
    <section class="business-section">
      <div class="container-box">
        <h2 class="section-title text-center">业务范围</h2>
        <div class="business-grid">
          <div v-for="business in businessScope" :key="business.id" class="business-card">
            <div class="business-icon">
              <el-icon size="40">
                <component :is="business.icon" />
              </el-icon>
            </div>
            <h3 class="business-title">{{ business.title }}</h3>
            <div class="business-items">
              <div v-for="item in business.items" :key="item" class="business-item">
                <el-icon size="14"><Check /></el-icon>
                <span>{{ item }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Team Section -->
    <section class="team-section">
      <div class="container-box">
        <h2 class="section-title text-center">专业团队</h2>
        <p class="team-description text-center"> 我们拥有一支经验丰富、专业过硬的技术团队 </p>

        <div class="team-grid">
          <div v-for="member in teamMembers" :key="member.id" class="team-card">
            <div class="member-avatar">
              <el-avatar :size="80" :src="member.avatar">
                <el-icon><User /></el-icon>
              </el-avatar>
            </div>
            <h3 class="member-name">{{ member.name }}</h3>
            <p class="member-position">{{ member.position }}</p>
            <p class="member-description">{{ member.description }}</p>
            <div class="member-skills">
              <el-tag v-for="skill in member.skills" :key="skill" size="small" class="skill-tag">
                {{ skill }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Certifications -->
    <section class="certifications-section">
      <div class="container-box">
        <h2 class="section-title text-center">资质荣誉</h2>
        <div class="certifications-grid">
          <div v-for="cert in certifications" :key="cert.id" class="cert-card">
            <div class="cert-image">
              <el-image :src="cert.image" :alt="cert.title" fit="contain" lazy />
            </div>
            <h3 class="cert-title">{{ cert.title }}</h3>
            <p class="cert-date">{{ cert.date }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact CTA -->
    <section class="cta-section">
      <div class="container-box">
        <div class="cta-content">
          <h2 class="cta-title">准备开始合作？</h2>
          <p class="cta-description">联系我们，获取专业的建筑技术服务方案</p>
          <div class="cta-actions">
            <el-button type="primary" size="large" @click="router.push('/contact')">
              联系我们
            </el-button>
            <el-button size="large" @click="router.push('/services')"> 查看服务 </el-button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import {
    Flag,
    View,
    Star,
    User,
    Check,
    Tools,
    School,
    Document,
    Trophy,
  } from '@element-plus/icons-vue';

  const router = useRouter();

  // 公司统计数据
  const companyStats = [
    {
      id: 1,
      number: '6+',
      label: '年专业服务',
      description: '自2018年成立以来持续服务',
    },
    {
      id: 2,
      number: '500+',
      label: '服务客户',
      description: '累计服务建筑企业及个人',
    },
    {
      id: 3,
      number: '1000+',
      label: '培训学员',
      description: '成功培训建筑技能人才',
    },
    {
      id: 4,
      number: '50+',
      label: '合作项目',
      description: '参与各类建筑工程项目',
    },
  ];

  // 业务范围
  const businessScope = [
    {
      id: 1,
      title: '工程咨询',
      icon: 'Tools',
      items: ['工程技术咨询', '项目可行性研究', '工程方案设计', '技术方案论证', '工程质量评估'],
    },
    {
      id: 2,
      title: '技能培训',
      icon: 'School',
      items: ['建筑工人技能培训', '安全生产培训', '新技术推广培训', '管理人员培训', '考试辅导培训'],
    },
    {
      id: 3,
      title: '资格认证',
      icon: 'Document',
      items: ['建筑工人证书申报', '技能等级认定', '特种作业证办理', '继续教育服务', '证书年审代办'],
    },
    {
      id: 4,
      title: '质量检测',
      icon: 'Trophy',
      items: ['工程质量检测', '安全隐患排查', '合规性审查', '第三方评估', '技术鉴定服务'],
    },
  ];

  // 团队成员
  const teamMembers = [
    {
      id: 1,
      name: '曹老师',
      position: '技术总监',
      description: '拥有15年建筑行业工作经验，精通各类建筑技术规范',
      avatar: '/src/assets/images/team1.jpg',
      skills: ['工程咨询', '技术培训', '质量管理'],
    },
    {
      id: 2,
      name: '李工程师',
      position: '项目经理',
      description: '建筑工程专业背景，具备丰富的项目管理经验',
      avatar: '/src/assets/images/team2.jpg',
      skills: ['项目管理', '工程监理', '技术指导'],
    },
    {
      id: 3,
      name: '王老师',
      position: '培训主管',
      description: '专业培训师，擅长建筑技能培训和安全教育',
      avatar: '/src/assets/images/team3.jpg',
      skills: ['技能培训', '安全教育', '考试辅导'],
    },
    {
      id: 4,
      name: '张工程师',
      position: '质量主管',
      description: '质量管理专家，负责工程质量检测和评估工作',
      avatar: '/src/assets/images/team4.jpg',
      skills: ['质量检测', '技术评估', '标准制定'],
    },
  ];

  // 资质荣誉
  const certifications = [
    {
      id: 1,
      title: '建筑业企业资质证书',
      image: '/src/assets/images/cert1.jpg',
      date: '2018年获得',
    },
    {
      id: 2,
      title: '职业技能培训机构许可证',
      image: '/src/assets/images/cert2.jpg',
      date: '2019年获得',
    },
    {
      id: 3,
      title: '质量管理体系认证',
      image: '/src/assets/images/cert3.jpg',
      date: '2020年获得',
    },
    {
      id: 4,
      title: '优秀培训机构奖',
      image: '/src/assets/images/cert4.jpg',
      date: '2023年获得',
    },
  ];
</script>

<style lang="scss" scoped>
  .about-page {
    min-height: 100vh;
  }

  // Page Banner
  .page-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 0;
    text-align: center;

    .banner-title {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 16px;

      @media (max-width: 768px) {
        font-size: 2rem;
      }
    }

    .banner-subtitle {
      font-size: 1.3rem;
      opacity: 0.9;
    }
  }

  // Introduction Section
  .intro-section {
    padding: 100px 0;

    .intro-content {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 60px;
      align-items: center;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    .intro-description p {
      font-size: 1.1rem;
      line-height: 1.8;
      color: #555;
      margin-bottom: 20px;
    }

    .intro-image {
      .el-image {
        width: 100%;
        height: 400px;
        border-radius: 16px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
      }
    }
  }

  // Stats Section
  .stats-section {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 80px 0;

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      text-align: center;
    }

    .stat-item {
      .stat-number {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 1.3rem;
        font-weight: 500;
        margin-bottom: 8px;
      }

      .stat-description {
        font-size: 0.9rem;
        opacity: 0.8;
      }
    }
  }

  // Mission Section
  .mission-section {
    padding: 100px 0;
    background: #f8f9fa;

    .mission-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
    }

    .mission-item {
      text-align: center;
      padding: 40px 20px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-8px);
      }

      .mission-icon {
        color: var(--el-color-primary);
        margin-bottom: 20px;
      }

      h3 {
        font-size: 1.5rem;
        color: #2c3e50;
        margin-bottom: 16px;
      }

      p {
        color: #666;
        line-height: 1.6;
      }
    }
  }

  // Business Section
  .business-section {
    padding: 100px 0;

    .business-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-top: 60px;
    }

    .business-card {
      background: white;
      border: 1px solid #e9ecef;
      border-radius: 16px;
      padding: 40px 30px;
      text-align: center;
      transition: all 0.3s;

      &:hover {
        border-color: var(--el-color-primary);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-4px);
      }

      .business-icon {
        color: var(--el-color-primary);
        margin-bottom: 20px;
      }

      .business-title {
        font-size: 1.5rem;
        color: #2c3e50;
        margin-bottom: 20px;
      }

      .business-items {
        text-align: left;
      }

      .business-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        color: #555;

        .el-icon {
          color: var(--el-color-success);
        }
      }
    }
  }

  // Team Section
  .team-section {
    padding: 100px 0;
    background: #f8f9fa;

    .team-description {
      font-size: 1.2rem;
      color: #666;
      margin-bottom: 60px;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
    }

    .team-card {
      background: white;
      padding: 40px 30px;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-8px);
      }

      .member-avatar {
        margin-bottom: 20px;

        .el-avatar {
          border: 3px solid var(--el-color-primary-light-5);
        }
      }

      .member-name {
        font-size: 1.3rem;
        color: #2c3e50;
        margin-bottom: 8px;
      }

      .member-position {
        color: var(--el-color-primary);
        font-weight: 500;
        margin-bottom: 12px;
      }

      .member-description {
        color: #666;
        line-height: 1.6;
        margin-bottom: 16px;
      }

      .member-skills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;

        .skill-tag {
          background: var(--el-color-primary-light-9);
          color: var(--el-color-primary);
          border: none;
        }
      }
    }
  }

  // Certifications Section
  .certifications-section {
    padding: 100px 0;

    .certifications-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      margin-top: 60px;
    }

    .cert-card {
      background: white;
      border: 1px solid #e9ecef;
      border-radius: 16px;
      padding: 30px;
      text-align: center;
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-4px);
      }

      .cert-image {
        margin-bottom: 20px;

        .el-image {
          width: 100%;
          height: 180px;
          border-radius: 8px;
        }
      }

      .cert-title {
        font-size: 1.2rem;
        color: #2c3e50;
        margin-bottom: 8px;
      }

      .cert-date {
        color: #666;
        font-size: 0.9rem;
      }
    }
  }

  // CTA Section
  .cta-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 100px 0;
    text-align: center;

    .cta-title {
      font-size: 2.5rem;
      margin-bottom: 16px;

      @media (max-width: 768px) {
        font-size: 2rem;
      }
    }

    .cta-description {
      font-size: 1.2rem;
      margin-bottom: 40px;
      opacity: 0.9;
    }

    .cta-actions {
      display: flex;
      gap: 16px;
      justify-content: center;

      @media (max-width: 768px) {
        flex-direction: column;
        align-items: center;
      }

      .el-button {
        height: 48px;
        padding: 0 32px;
        font-size: 16px;
      }
    }
  }

  // Common styles
  .section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 20px;

    &.text-center {
      text-align: center;
    }
  }
</style>
